<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>    
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>修改密码-Sharing Your Story</title>
		<link rel="Shortcut Icon" href="public/img/favicon.ico" />
		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css" />
		<script src="public/js/jquery-3.2.1.min.js"></script>
		<script src="public/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="public/css/style.css" />
		<script src="public/js/holder.min.js"></script>
	</head>
	<script type="text/javascript">
		
		//输入框获得焦点时隐藏其本身的错误信息
		function hideError(val){
			document.getElementById(val + "Error").innerHTML="";
		}
		//修改成功后的定时跳转
		window.onload = function(){
			var value = document.getElementById("hidden").value;
			if(value.toString() == "true"){
				var time = 3;
				var second = document.getElementById("second");
				var timer = setInterval(function(){
					second.innerHTML = time;
					time--;
					if(time == 0){
						clearInterval(timer);
						location.href="http://localhost:8000/Sharing-Your-Story/loginUI";
					}
				},1000);
			}
		}
		//校验邮箱格式
		function checkEMail(){
			var value = document.getElementById("eMail").value;
			var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;         //@author 脚本之家 麻球科技
			if(!re.test(value)){
				document.getElementById("eMailError").innerHTML="邮箱格式错误！";
				return false;
			}
			return true;
		}
		//校验密码格式
		function checkPwd(){
			var value = document.getElementById("pwd").value;
			if(value.length <= 10 && value.length >= 6)
				return true;
			document.getElementById("pwdError").innerHTML="密码格式不正确！";
			return false;
		}
		//校验新密码格式
		function checkNewPwd(){
			var value = document.getElementById("newPwd").value;
			if(value.length <= 10 && value.length >= 6)
				return true;
			document.getElementById("newPwdError").innerHTML="密码格式不正确！";
			return false;
		}
		//校验两次密码是否相等
		function checkConfirmPwd(){
			var value1 = document.getElementById("newPwd").value;
			var value2 = document.getElementById("confirmPwd").value;
			if(value1 == value2){
				return true;
			}
			document.getElementById("confirmPwdError").innerHTML="两次输入密码不一致！";
			return false;			
		}
		//校验整个表单
		function checkForm(){
			if(checkConfirmPwd()&checkNewPwd()&checkPwd()&checkEMail()){
				return true;
			}
			return false;
		}
	</script>
	<body>
		<!--顶部效果-->
		<%@ include file= "/WEB-INF/zpublicpages/header.jsp" %>
		
		<!--登陆标识-->
		<div class="login-title">修改密码</div>
		
		<!--登录框-->
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<div class="form-line-up"></div>
				<div class="row">
					<div class="col-md-offset-1 col-md-10">
						<div class="panel panel-primary">
							<div class="panel-heading">
								<div class="panel-title" style="text-align: center;">
									<img style="border-radius: 50%;height: 90px;" src="holder.js/100x100" alt="">
								</div>
							</div>
							
							<div class="panel-body">
								<form action="${pageContext.request.contextPath}/userServlet?operation=changePwd" method='post'
															 onsubmit="return checkForm()">
									<h4 class="error" id="changeInfo">
										<c:if test="${requestScope['changeInfo'] and !empty requestScope['changeInfo']}">
											修改成功，<span id="second">3</span>秒后跳转至登录界面！
										</c:if>
										<c:if test="${!requestScope['changeInfo'] and !empty requestScope['changeInfo']}">
											信息有误，修改密码失败！
										</c:if>
									</h4>
									<input id="hidden" type="hidden" value="${requestScope['changeInfo'] }"/>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-user'></span>
											</span>
											<input type="text" name="eMail" class='form-control'
												onfocus="hideError('eMail')" onblur="checkEMail()"
												placeholder='邮箱...' id='eMail' />
										</div>
										<h4 class="error" id="eMailError"></h4>
									</div>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" name="userPwd" class='form-control'
												onfocus="hideError('pwd')" onblur="checkPwd()"
												placeholder='旧密码...' id="pwd" />
										</div>
										<h4 class="error" id="pwdError"></h4>
									</div>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" name="newPwd" class='form-control'
												onfocus="hideError('newPwd')" onblur="checkNewPwd()"
												placeholder='新密码...' id="newPwd" />
										</div>
										<h4 class="error" id="newPwdError"></h4>
									</div>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" name="confirmPwd" class='form-control'
												onfocus="hideError('confirmPwd')" onblur="checkConfirmPwd()"
												placeholder='确认新密码...' id="confirmPwd"/>
										</div>
										<h4 class="error" id="confirmPwdError"></h4>
									</div>
									<div class="form-group ok" style="text-align: center;">
										<input style="width: 100%;" type="submit" value="修改密码" class='btn btn-primary btn-lg'>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--底部效果-->
		<%@ include file="/WEB-INF/zpublicpages/footer.jsp"%>
	</body>
</html>